<template>
    <view class="container">
        <input type="text" @input="onkeyinput" class="search" value="" placeholder="搜素内容" placeholder-style="margin-left:15px" />
        <!-- <button type="default" @click="searchPosition" class="btn">搜索</button> -->
        <text @click="searchPosition" class="btn">搜索</text>
        <map
            style="width: 100%; height: 100vh;"
            @regionchange="regionchangeevent"
            @callouttap="callouttapevent"
            @poitap="poitap"
            scale="14"
            :latitude="latitude"
            :longitude="longitude"
            :markers="covers"
            @markertap="markertap"
            @tap="maptap"
        ></map>
        <wyb-popup ref="popup" type="bottom" height="130" width="500" radius="6" :showCloseIcon="true">
            <view class="popup-content">
                <navigator :url="'../../pages/map/charging/charging?markerId=' + markerId" open-type="navigate">
                    <view class="title">{{ powerOneData.powerplanName }}</view>
                </navigator>
                <view class="title-msg">
                    <text>对外开放</text>
                    <text>停车收费</text>
                    <text>互联互通</text>
                </view>
                <view class="title-price">
                    <view class="left">
                        <text>{{ powerOneData.stationPrice }}</text>
                        <text>元/度起</text>
                    </view>
                    <view class="right" @click="toMapAPP(latitude, longitude, name)">
                        <image class="image" src="../../static/map/daozhequ@2x.png" mode=""></image>
                        <text>到这去</text>
                    </view>
                </view>
            </view>
        </wyb-popup>
        <view>{{ powerData }}</view>
    </view>
</template>

<script>
// （1）引入SDK
import QQMapWX from '../../utils/qqmap-wx-jssdk.min.js';
let qqmapsdk;
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapMutations, mapActions } = createNamespacedHelpers('map');
export default {
    data() {
        return {
            id: 0, // 使用 marker点击事件 需要填写id
            title: 'map',
            latitude: 39.909,
            longitude: 116.39742,
            currentLatitude: '',
            currentLongitude: '',
            covers: [],
            searchData: '酒店',
            name: '',
            markerId: null
        };
    },
    computed: {
        ...mapState(['powerData', 'powerOneData'])
    },
    //监听地图坐标数据
    watch: {
        // powerData: {
        //     handler(a, b) {
        //         this.setpowerData(a);
        //         this.getCurrentPositon();
        //     },
        //     immediate: true
        // }
    },
    methods: {
        maptap(e){
          console.log('tap',e);  
        },
        ...mapMutations(['setpowerData']),
        ...mapActions(['getridge']),
        //获取搜索名字
        onkeyinput(e) {
            this.searchData = e.target.value;
        },
        markertap(e) {
            let { markerId } = e.detail;
            this.markerId = markerId;
            this.$emit('getOnePowerData', markerId);
        },
        getCurrentPositon() {
            uni.getLocation({
                success: res => {
                    const { longitude, latitude } = res;
                    this.latitude = latitude;
                    this.longitude = longitude;
                    // console.log('getCurrentPositon', latitude, longitude);
                    this.currentLatitude = latitude;
                    this.currentLongitude = longitude;
                    // this.covers = [...this.powerData, ...this.covers];
                    // this.covers.forEach((item, index) => {
                    //     this.covers[index] = {
                    //         id: item.powerplantId,
                    //         latitude: item.powerplantCoordinate.latitude,
                    //         longitude: item.powerplantCoordinate.longitude,
                    //         iconPath: '../../static/map/position3.png',
                    //         width: 30,
                    //         height: 30,
                    //         callout: {
                    //             content: '地址为:' + item.powerplantAddress,
                    //             display: 'BYCLICK',
                    //             padding: 10
                    //         }
                    //     };
                    // });
                    this.covers[0] = {
                        latitude: this.latitude,
                        longitude: this.longitude,
                        iconPath: '../../static/map/position3.png',
                        width: 30,
                        height: 30,
                        callout: {
                            content: '地址为:' + '成都',
                            display: 'BYCLICK',
                            padding: 10
                        }
                    };
                }
            });
        },
        callouttapevent(e) {
            this.$refs.popup.show();
            console.log(666666,e);
        },
        // 点击定位标时触发
        poitap(e) {
            let { latitude, longitude, name } = e.detail;
            this.latitude = latitude;
            this.longitude = longitude;
            this.name = name;
        },
        // 视野发生变化时触发
        regionchangeevent(e) {
            // 拖动结束
            if (e.type == 'end') {
                const { longitude, latitude } = e.target.centerLocation;
                // console.log(longitude, latitude);
                // 拖动结束后，不要直接把经度纬度赋值latitude
                this.currentLatitude = latitude;
                this.currentLongitude = longitude;
            }
        },
        // 点击搜索按钮，执行指定内容搜索
        searchPosition() {
            this.getridge({ lat: this.latitude, lng: this.longitude });
            // let mks = [];
            // 调用接口
            // const location = this.currentLatitude + ',' + this.currentLongitude;
            setTimeout(()=>{
              this.covers = this.powerData
              this.covers.forEach((item,index)=>{
                  this.covers[index]={
                      // 获取返回结果，放到mks数组中
                      id: item.content.powerplantId,
                      latitude: item.content.location.lat,
                      longitude: item.content.location.lon,
                      iconPath: '../../static/map/position3.png', //图标路径
                      width: 30,
                      height: 30,
                      callout: {
                          content: '地址为:' + item.content.powerplantAddress,
                          display: 'BYCLICK',
                          padding: 10
                      }
                  };
              })
            },2000)

            // console.log(_this.covers);
            // qqmapsdk.search({
            //     // 关进词语
            //     keyword: this.searchData,
            //     // 位置信息，以你当前地图的中心位置作为搜索的点
            //     location: location,
            //     success: function(res) {
            //         let mks = [];
            //         for (var i = 0; i < res.data.length; i++) {
            //             mks.push({
            //                 // 获取返回结果，放到mks数组中
            //                 title: res.data[i].title,
            //                 id: res.data[i].id,
            //                 latitude: res.data[i].location.lat,
            //                 longitude: res.data[i].location.lng,
            //                 iconPath: '../../static/map/position3.png', //图标路径
            //                 width: 30,
            //                 height: 30,
            //                 callout: {
            //                     content: '地址为:' + res.data[i].address,
            //                     display: 'BYCLICK',
            //                     padding: 10
            //                 }
            //             });
            //         }
            //         console.log(res.data);
            //         _this.covers = mks;
            //     },
            //     fail: function(error) {
            //         console.log(error);
            //     }
            // });
        }
    },
    mounted: function() {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: 'UCNBZ-4MOEX-XPN4L-ZRKTA-NHKVS-EVBDB'
        });
        this.getCurrentPositon();
    }
};
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    .search {
        width: 100%;
        height: 7vh;
        // border: 1rpx solid gray;
        position: absolute;
        z-index: 9999;
        border-radius: 5px;
        background-color: white;
    }

    .btn {
        position: absolute;
        display: inline-block;
        width: 100rpx;
        right: 20rpx;
        z-index: 10000;
        top: 5rpx;
        height: 6vh;
        line-height: 6vh;
    }
    .popup-content {
        padding: 40rpx 24rpx 40rpx 24rpx;
        .title {
            font-size: 32rpx;
            color: #333333;
            font-weight: 600;
        }
        .title-msg {
            margin-top: 8rpx;
            text {
                display: inline-block;
                width: 100rpx;
                height: 40rpx;
                background-color: #f5e1be;
                color: #ffa85e;
                font-size: 18rpx;
                border-radius: 14rpx;
                margin-right: 8rpx;
                text-align: center;
                line-height: 40rpx;
            }
        }
        .title-price {
            display: flex;
            justify-content: space-between;
            margin-top: 34rpx;
            .left {
                text:nth-child(1) {
                    font-size: 40rpx;
                    color: #ff5300;
                    font-weight: 600;
                }
                text:nth-child(2) {
                    font-size: 20rpx;
                    color: #333333;
                }
            }
            .right {
                width: 160rpx;
                height: 60rpx;
                background-color: #ff6208;
                border-radius: 36rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                .image {
                    width: 20rpx;
                    height: 30rpx;
                }
                text {
                    font-size: 24rpx;
                    color: #ffffff;
                    margin-left: 8rpx;
                }
            }
        }
    }
}
</style>
